<template>
<!-- 个人中心 -->
    <div class="micenteritem">
        <!-- 头部组件 -->
        <topitem :num="num"></topitem>
        <div class="container">
             <div class="site">
                <span>当前位置</span> : 
                <a href="">看漫画 </a>> 
                <a href="">用户中心 </a>>
                <a href="" v-show="boohindex==1" :class="{'con':boohindex==1}">我的主页 </a>
                <a href="" v-show="boohindex==2" :class="{'con':boohindex==2}">我的书架 </a>
            </div>
            <!--  左边列表 -->
            <div class="myitem clearfix">
                <div class="mylists">
                    <ul>
                        <li :class="{'con':boohindex==1}"  @click="boohindex=1">
                            <span>我的主页</span>
                        </li >
                        <li :class="{'con':boohindex==2}"  @click="boohindex=2">
                            <span>我的书架</span>
                        </li>
                        <li>
                            <span>充值中心</span>
                        </li>
                        <li>
                            <span>我的书单</span>
                        </li>
                    </ul>
                </div>
                <!--  右边内容 -->
                <!-- 我的主页 -->
                <div :class="['myboxone', {'dispaly':boohindex>1}]">
                    <div class="mycloud">
                        <img src="../assets/img/cloud-line.png" alt="">
                    </div>
                    <div class="myinfo clearfix">
                        <div class="myinfo-left">
                            <img src="../assets/img/tx001.jpeg" alt="">
                            <div class="mytext">
                                <p class="myname">@瓜呆 <em class="ift-male"></em> <i class="ift-edit"></i> </p>
                                <p class="mymap"><span class="ift-local"></span>暂未获取到地理信息</p>
                                <p class="myid">ID:279842212</p>
                                <p class="sigh">暂无个人签名</p>
                            </div>
                        </div>
                        <div class="myifo-right">
                            <img src="../assets/img/my010.png" alt="">
                            <button>充值中心</button>
                        </div>
                    </div>
                    <div class="mymoney">
                        <ul class="clearfix">
                            <li>
                                <div>
                                    <p>钻石</p>
                                    <p>0</p>
                                    <img src="../assets/img/my01.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>金币</p>
                                    <p>0</p>
                                    <img src="../assets/img/my02.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>推荐票</p>
                                    <p>11</p>
                                    <img src="../assets/img/my03.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>月票</p>
                                    <p>6</p>
                                    <img src="../assets/img/my04.png" alt="">
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="mydynamic">
                        <h2>我的动态</h2>
                        <div class="dynamicitem">
                            <img src="../assets/img/book.png" alt="">
                            <p>主人，您还没有任何动态哦~</p>
                        </div>
                    </div>

                </div>
                <!-- 我的书架 -->
                <div :class="['mybook', {'dispaly':boohindex>2}]" >
                    <div class="mybook-item">
                        <div class="book-top">
                            <ul class="clearfix">
                                <li class="con">
                                    <span>我的收藏</span>
                                    <span>({{Collectionlength}})</span>
                                </li>
                                <li>
                                    <span>阅读历史</span>
                                    <span>(0)</span>
                                </li>
                            </ul>
                            <div class="book-top-right">
                                <i class="ift-edit" v-show="bokchoice" @click="addchoice"></i>
                                <div class="choice" v-show="!bokchoice">
                                     <!-- <span>已选 0</span> 
                                    <p>
                                        <i class="ift-check"></i>全选
                                    </p>  -->
                                    <button @click="deleteitem"> 删除</button>
                                    <button @click="addchoice">取消</button>
                                </div>
                            </div>
                        </div>
                        <div class="book-bottom">
                            <ul v-show="collstate" class="clearfix">
                                <li v-for="(item,index) in Collectionstate" :key="index">
                                    <div class="bok-img">
                                        <img :src="item.obj.img" alt="">
                                        <div class="bok-mb" v-show="bokmbstate">
                                            <i :class="['ift-check',{'con':itemnum==item.obj.id}]" @click="addclass(item.obj.id)" ></i>
                                        </div>
                                    </div>
                                    <p>{{item.obj.title}}</p>
                                </li>
                            </ul>
                            <div class="book-img" v-show="!collstate">
                                <img src="../assets/img/book.png" alt="">
                                <p>主人，不收藏漫画怎么追更呢～</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- 底部组件 -->
        <bigcat></bigcat>
        
    </div>
</template>

<script>
import topitem from "../components/TopAssembly.vue" ;
import bigcat from "../components/BottomAssembly.vue" ;
    export default {
        data() {
            return {
                num: 0,
                bokchoice:true,// 编辑显示状态
                boohindex:1,// 判断左边列表
                collstate:false,
                Collectionitem:null,
                Collectionlength: 0 ,// 收藏个数
                itemnum:null,
                Collectionstate:[],
                bokmbstate:false,// 幕布状态
            };
        },
        created(){
            window.scrollTo(0,0)
            this.Collectionmethod()// 获取收藏数据
        },
        methods:{
            // 编辑显示状态
            addchoice(){
                this.bokchoice = ! this.bokchoice;
                this.bokmbstate = ! this.bokmbstate;
            },
            addclass(index){
                this.itemnum = index;
                console.log(this.itemnum);
            },
            deleteitem(){
                if(this.itemnum){

                    let arr = JSON.parse(window.localStorage.getItem("Collection"))
                    let key = arr.findIndex(item => {
                        return item.obj.id == this.itemnum
                    });
                    console.log(key);
                    arr.splice(key,1)
                    console.log(arr);
                    window.localStorage.setItem("Collection",JSON.stringify(arr))
                    this.Collectionmethod()
                    this.addchoice()
                }
            },
            // 获取收藏数据
            Collectionmethod(){
                this.Collectionstate = JSON.parse(window.localStorage.getItem("Collection"))
                if(this.Collectionstate){
                    this.collstate = true;
                    this.Collectionlength = this.Collectionstate.length;
                    // console.log(this.Collectionstate);
                }

            }

        },
        components:{
            topitem,
            bigcat
        }
    }
</script>

<style lang="scss" scoped>
// site
.micenteritem .site{
    margin-top:64px ;
    height: 48px;
    line-height: 48px;
    padding: 0px 8px ;
    font-size: 14px;
    color: #DCDCDC;
}
.micenteritem .site span{
    color: #999;
}
.micenteritem .site a{
    color: #666;
}
.micenteritem .site a.con{
    color: #fc7582;
}


.myitem{
    width: 100%;
    margin-bottom:24px ;
}
// 左边列表
.myitem .mylists{
    float: left;
    width: 246px;
    height: 272px;
    padding: 0px 8px;
    
}
.myitem .mylists ul{
    margin-right: 16px;
    box-shadow: 0 0 6px 0 #ffd1d8;
}
.myitem .mylists ul li{
   width: 100%;
   height: 68px;
   text-align: center;
   line-height: 68px;
   font-size: 18px;
   color: #666;
}
.myitem .mylists ul li:nth-child(1){
   border-radius: 10px 10px 0 0;
}
.myitem .mylists ul li:nth-child(4){
   border-radius: 10px 10px 0 0;
}
.myitem .mylists ul li:hover span{
   color: #fc6976;
}
.myitem .mylists ul li:hover{
   width: 100%;
   height: 68px;
   text-align: center;
   line-height: 68px;
   font-size: 18px;
   color: #fc6976;
   background-color: #fff4f4;
   position: relative;
}
.myitem .mylists ul li.con{
   width: 100%;
   height: 68px;
   text-align: center;
   line-height: 68px;
   font-size: 18px;
   color: #fc6976;
   background-color: #fff4f4;
   position: relative;
}
.myitem .mylists ul li.con a{
   color: #fc6976;
}
.myitem .mylists ul li.con::before{
    content: "";
    height: 100%;
    width: 4px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #fc6976;
}

// 右边内容
// 我的主页
.myboxone{
    float: left;
    width: 980px;
    padding: 0 8px;
}
.myboxone .mycloud{
    width: 100%;
    height: 96px;
}
.myboxone .mycloud img{
    width: 100%;
}
.myboxone .myinfo{
    margin-bottom:70px ;
}
.myboxone .myinfo .myinfo-left{
    float: left;
    width: 50%;
    height: 152px;
}
.myboxone .myinfo .myinfo-left img{
    float: left;
    width: 134px;
    height: 134px;
    border-radius: 50%;
    margin:0 10px 0 70px ;
}
.myboxone .myinfo .myinfo-left .mytext{
    float: left;
    width: 276px;
    height: 152px;
    border-radius: 50%;
}
.myboxone .myinfo .myinfo-left .mytext p:nth-child(1){
    width: 100%;
    height: 36px;
    color: #333;
    font-size: 18px;
    line-height: 36px;
}
.myboxone .myinfo .myinfo-left .mytext p:nth-child(1) em{
    display: inline-block;
    width: 20px;
    height: 20px;
    color: #43bef6;
    font-size: 18px;
    line-height: 36px;
}
.myboxone .myinfo .myinfo-left .mytext p:nth-child(1) i{
    display: inline-block;
    width: 20px;
    height: 20px;
    color: #999;
    font-size: 18px;
    line-height: 36px;
}
.myboxone .myinfo .myinfo-left .mytext p:nth-child(2) {
    width: 100%;
    height: 20px;
    color: #999;
    font-size: 14px;
    line-height: 20px;
}
.myboxone .myinfo .myinfo-left .mytext p:nth-child(2) span{
    display: inline-block;
    width: 12px;
    height: 12px;
    color: #999;
    font-size:12px ;
}
.myboxone .myinfo .myinfo-left .mytext p:nth-child(3) {
    width: 100%;
    height: 20px;
    color: #999;
    font-size: 14px;
    line-height: 20px;
    margin-top:8px ;
}
.myboxone .myinfo .myinfo-left .mytext p:nth-child(4) {
    width: 100%;
    height: 60px;
    color: #999;
    font-size: 14px;
    line-height: 20px;
    margin-top:8px ;
}

.myifo-right {
    float: right;
    width: 50%;
    height: 108px;
    text-align: center;
}
.myifo-right img{
    display: block;
    margin: 0 auto;
    width: 88px;
    height: 88px;
}
.myifo-right button{
    width: 132px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    border-radius: 16px;
    margin: 0 auto;
    margin-top:-7px ;
    border: 0;
    background-image: linear-gradient(0deg,#fc6976,#FC4F71 42%,#FFB5C3);
}

.mymoney{
    width: 100%;
    height: 132px;
    margin-top:30px ;
}
.mymoney ul li{
    float: left;
    width: 232px;
    height: 132px;
    box-shadow: 0 0 6px 0 #ffd1d8;
    border-radius: 18px;
    margin-left:17px ;
}
.mymoney ul li:hover{
    float: left;
    width: 232px;
    height: 132px;
    box-shadow: 0 0 15px 0 #ffd1d8;
    border-radius: 18px;
    margin-left:17px ;
}
.mymoney ul li:nth-child(1){
    margin-left:0 ;
}
.mymoney ul li div{
    width: 100%;
    height: 64px;
    padding: 34px 0px;
    position: relative;
}
.mymoney ul li div img{
    width: 64px;
    height: 64px;
    position: absolute;
    top: 34px;
    right: 40px;
}
.mymoney ul li div p:nth-child(1){
    width: 60%;
    height: 28px;
    padding-top:8px ;
    font-size: 24px;
    color: #666;
    text-align: center;
}
.mymoney ul li div p:nth-child(2){
    width: 60%;
    height: 20px;
    margin-top:5px ;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.mydynamic h2{
    width: 100%;
    height: 28px;
    font-size: 24px;
    color: #000;
    padding: 32px 0;
    font-weight: 400;
}
.mydynamic .dynamicitem{
    width: 100%;
    height: 142px;
    padding-bottom:65px ;
    text-align: center;
}
.mydynamic .dynamicitem img{
    width: 100px;
    height: 100px;
    margin-bottom:25px ;
}
.mydynamic .dynamicitem p{
    width: 100%;
    height: 16px;
    font-size: 14px;
    color: #666;
    line-height:16px;
}

// 我的书架
.mybook{
    float: left;
    width: 980px;
    padding: 0 8px;
}
.mybook .mybook-item{
    width: 100%;
    box-shadow: 0 0 6px 0 #ffd1d8;
    border-radius: 6px;
}
.mybook .mybook-item .book-top{
    height: 56px;
    box-shadow: 0 0 6px 0 #ffd1d8;
    border-radius: 6px;
    background: #FFF4F4;
    padding: 0 32px;
}
.mybook .mybook-item .book-top ul{
    float: left;
    height: 100%;
    line-height: 56px;
}
.mybook .mybook-item .book-top ul li{
    float: left;
}
.mybook .mybook-item .book-top ul li.con span{
    float: left;
    color: #fc6976;
}
.mybook .mybook-item .book-top ul li span{
    float: left;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}
.mybook .mybook-item .book-top ul li:nth-child(1)::after{
    vertical-align: middle;
    display: inline-block;
    content: "";
    height: 20px;
    margin: 0 25px;
    border-right: 1px solid #fc6976;
}
.mybook .mybook-item .book-top .book-top-right{
    float: right;
    color: #fc6976;
    font-size: 24px;
    vertical-align: middle;
}
.mybook .mybook-item .book-top .book-top-right i{
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
    height: 40px;
    text-align: right;
    color: #fc6976;
    line-height: 40px;
    text-align: center;
    margin-top:10px;
    cursor: pointer;
}
.mybook .mybook-item .book-top .book-top-right .choice{
    font-size: 14px;
    width: 304px;
    height: 56px;
    line-height: 56px;
    color: #333;
}
.mybook .mybook-item .book-top .book-top-right .choice span{
    display: inline-block;
    width: 60px;
    height: 56px;
    margin-left:16px ;
    vertical-align: middle;
}
.mybook .mybook-item .book-top .book-top-right .choice P{
    display: inline-block;
    width: 60px;
    height: 56px;
    margin-left:16px ;
    vertical-align: middle;
}
.mybook .mybook-item .book-top .book-top-right .choice P i{
    display: inline-block;
    width: 18px;
    height: 18px;
    text-align: center;
    border: 1px solid #999;
    border-radius: 50%;
    line-height: 20px;
    color: #fff;
    vertical-align: middle;
    margin: 0 5px 0 0;
    background-color: #fff;
}
.mybook .mybook-item .book-top .book-top-right .choice P i.con{
    background-color: #fc6976;;
}

.mybook .mybook-item .book-top .book-top-right .choice button{
    display: inline-block;
    // float: right;
    width: 60px;
    height: 30px;
    margin-left:16px ;
    vertical-align: middle;
    line-height: 30px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    background: #fc6976;
    border-radius: 15px;
    border: 0;
}

.mybook .mybook-item .book-bottom {
    width: 100%;
    height: 237px;
    // max-height: 800px;
    padding-bottom: 80px;
    position: relative;
}
.mybook .mybook-item .book-bottom ul{
    padding: 32px;
}
.mybook .mybook-item .book-bottom ul li{
    float: left;
    width: 169px;
    height: 255px;
    margin: 0 17px 24px 0px;
}
.mybook .mybook-item .book-bottom ul li .bok-img{
    width: 169px;
    height: 225px;
    overflow: hidden;
    position: relative;
}
.mybook .mybook-item .book-bottom ul li .bok-img img{
   width: 100%;
   height: 110%;
   transition: all 0.3s linear 0s;
}
.mybook .mybook-item .book-bottom ul li .bok-img:hover img{
   width: 100%;
   height: 110%;
   margin-top:-10px ;
   transition: all 0.3s linear 0s;
}
.mybook .mybook-item .book-bottom ul li  p {
  width: 100%;
  height: 20px;
  margin-top:10px ;
  line-height: 20px;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mybook .mybook-item .book-bottom .book-img{
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    text-align: center;
}
.mybook .mybook-item .book-bottom .book-img img{
    width: 100px;
    height: 100px;
    margin-bottom:20px ;
}
.mybook .mybook-item .book-bottom .bok-img .bok-mb{
    width: 169px;
    height: 225px;
    position: absolute;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: 0.7);
    z-index: 10;
}
.mybook .mybook-item .book-bottom .bok-img .bok-mb i{
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid #fff;
    border-radius: 50%;
}
.mybook .mybook-item .book-bottom .bok-img .bok-mb i.con{
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #fc6976;
    color: #fff;
}


// 隐藏
.dispaly{
    display: none;
}

</style>